<template>
  <div class="ant-page-header">
    <div class="ant-page-header-back">
      <div class="ant-page-header-back-button" @click="onBack">
        <a-icon type="arrow-left" />
      </div>
      <div class="ant-divider ant-divider-vertical"></div>
    </div>
    <div class="ant-page-header-heading">
      <span class="ant-page-header-heading-title">{{ title }}</span>
      <span class="ant-page-header-heading-sub-title">{{ subTitle }}</span>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator'

  @Component
  export default class PageHeader extends Vue {
    @Prop({
      required: false,
      default: ''
    })
    title!: string

    @Prop({
      required: false,
      default: ''
    })
    subTitle!: string

    onBack(event: Event) {
      this.$emit('click', event)
    }
  }
</script>

<style lang="scss">
  .ant-page-header {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0,0,0,0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    padding: 0;
    background: #fff;
    &-back {
      display: inline-block;
      padding: 4px 0;
      font-size: 16px;
      line-height: 100%;
      &-button {
        text-decoration: none;
        outline: none;
        transition: color .3s;
        color: rgba(0,0,0,0.65);
        cursor: pointer;
        border: 0;
        background: transparent;
        padding: 0;
        line-height: inherit;
        display: inline-block;
        &:hover {
          color: #1890ff;
        }
      }
    }
    &-heading {
      display: inline-block;
      &-title {
        display: inline-block;
        padding-right: 12px;
        color: rgba(0,0,0,0.85);
        font-weight: bold;
        font-size: 16px;
        line-height: 1.4;
      }
      &-sub-title {
        display: inline-block;
        padding-right: 12px;
        color: rgba(0,0,0,0.45);
        font-size: 14px;
        line-height: 1.8;
      }
    }
  }
</style>
